<template>
  <div>
    <nav-bar title="固定巡检故障处理"></nav-bar>
    <div class="realTimeInspection maxinBox">
      <van-row class="imagesTop">
        <van-col :span="8" v-for="(item, index) in $route.params.item.troubleAttachmentList" :key="index">
          <div>
            <img :src="item">
          </div>
        </van-col>
      </van-row>
      <div>
        <van-cell title="问题类别" :value="$route.params.item.categoryName || '--'"/>
        <van-cell title="巡更点" :value="$route.params.item.patrolPointName"/>
        <!-- <van-cell class="marginTop5" title="截止日期" :value="$route.params.itemData.timeLimit" /> -->
        <van-field
          class="textarea"
          type="textarea"
          :value="$route.params.item.troubleDesc"
          name="问题描述"
          label="问题描述"
          disabled
        />
        <van-cell title="详情" is-link @click="otherDetails" />
        <van-field
          class="textarea marginTop5"
          type="textarea"
          v-model="form.reformDesc"
          name="整改描述"
          label="整改描述"
          placeholder="请输入整改描述"
          :rules="[{ required: true, message: '请填写整改描述' }]"
        />
        <van-row v-if="$route.params.item.completed">
          <van-col v-for="(item, index) in $route.params.item.reformAttachmentList" :key="index" :span="8">
            <div style="padding: 1.25rem 0.625rem">
              <img style="width: 100%;" :src="item">
            </div>
          </van-col>
        </van-row>
        <van-field name="uploader" label="上传照片" v-if="!$route.params.item.completed && $route.params.status === 1">
          <template #input>
            <van-uploader multiple :max-count="3" v-model="imagesList" :after-read="afterRead" />
          </template>
        </van-field>
      </div>
      <div class="marginTop5" style="padding: 0.3125rem 1.25rem;" v-if="!$route.params.item.completed && $route.params.status === 1">
        <van-button round block type="info" native-type="onSubmit" @click="onSubmit">
          提交故障处理
        </van-button>
      </div>
    </div>
  </div>
</template>

<script>
  import fixedInspectionAPI from '../../../../api/workAPI/fixedInspectionAPI.js'
  import dashbordAPI from '../../../../api/dashbordAPI.js'
  export default {
    data() {
      return {
        form: {
          id: this.$route.params.item.id,
          reformDesc: this.$route.params.item.reformDesc,
          reformAttachmentList: []
        },
        inspectionDesc: '',
        imagesList: [],
        images: ['https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591868469060&di=b51d6761162330726659091d47158a3b&imgtype=0&src=http%3A%2F%2Fwww.zhaji.net.cn%2Fuploads%2Fallimg%2F171107%2F1-1G10G51019A8.jpg', 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591868469060&di=b51d6761162330726659091d47158a3b&imgtype=0&src=http%3A%2F%2Fwww.zhaji.net.cn%2Fuploads%2Fallimg%2F171107%2F1-1G10G51019A8.jpg', 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591868469060&di=b51d6761162330726659091d47158a3b&imgtype=0&src=http%3A%2F%2Fwww.zhaji.net.cn%2Fuploads%2Fallimg%2F171107%2F1-1G10G51019A8.jpg']
      }
    },
    methods: {
      // 上传图片
      afterRead(file) {
        dashbordAPI.uploadAvatar(file.file).then(res => {
          this.form.reformAttachmentList.push(res.fileUrl)
        })
      },
      // 其他详情
      otherDetails() {
        this.$router.push({
          name: 'FixedTaskDetails',
          params: {
            data: this.$route.params.item
          }
        })
      },
      // 提交表单
      onSubmit() {
        this.$dialog.confirm({
          title: '温馨提示',
          message: '提交后信息无法修改，请确认信息无误',
        }).then(() => {
          fixedInspectionAPI.taskRectification(this.form).then(res => {
            this.$router.push({
              name: 'FixedInspection'
            })
          })
        })
        .catch(() => {
          // on cancel
        });
      }
    }
  }
</script>
